<?php
$args = array(
    'posts_per_page' => 10,
    'post_type' => 'post'
);
$posts = get_posts($args);
$count = count($posts);
$i = 0;

// 随机生成颜色函数
function get_random_color()
{
    $colors = ["#FF5733", "#33FF57", "#3357FF", "#FF33A1", "#33FFA1", "#A133FF", "#FFA133", "#A1FF33", "#FF3333", "#33FF33", "#3333FF"];
    return $colors[array_rand($colors)];
}
?>

<div class="blog-container">
    <div class="row">
        <?php foreach ($posts as $post):
            setup_postdata($post); ?>
            <div class="col-md-6">
                <div class="blog-post <?php echo $i % 2 == 0 ? 'even' : 'odd'; ?>">
                    <div class="blog-post-image">
                        <?php
                        // 尝试从文章内容中提取第一张图片
                        if (has_post_thumbnail($post->ID)):
                            echo get_the_post_thumbnail($post->ID, 'medium', array('class' => 'img-responsive'));
                        else:
                            // 提取第一张图片
                            $content = apply_filters('the_content', $post->post_content);
                            preg_match_all('/<img[^>]+src="([^">]+)"/', $content, $matches);
                            if (!empty($matches[1])) {
                                echo '<img class="img-responsive" src="' . esc_url($matches[1][0]) . '" alt="文章头图" />';
                            } else {
                                // 使用默认图片
                                echo '<img class="img-responsive default-image" src="https://wordpress12138.oss-cn-hangzhou.aliyuncs.com/assets/image/nophoto.png" alt="默认图片" />';
                            }
                        endif;
                        ?>
                    </div>

                    <div class="blog-post-content">
                        <div class="post-header">
                            <div class="blog-post-title">
                                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
                            </div>
                            <div class="sticky-hot-icons">
                                <?php if (is_sticky($post->ID)): ?>
                                    <div class="sticky-icon">置顶</div>
                                <?php endif; ?>
                                <?php if (get_post_meta($post->ID, 'is_hot', true)): ?>
                                    <div class="hot-icon">热</div>
                                <?php endif; ?>
                            </div>
                        </div>

                        <div class="blog-post-meta">
                            <span class="blog-post-author">作者: <?php the_author(); ?></span>
                            <span class="blog-post-date"><?php the_time('Y年n月j日'); ?></span>
                            <span class="blog-post-comments">
                                <a href="<?php comments_link(); ?>">
                                    <i class="icon iconfont icon-icon-weixin-copy"></i>
                                    <?php comments_number('0', '1', '%'); ?>
                                </a>
                            </span>
                            <span class="post-views">
                                <?php
                                $views = get_post_meta($post->ID, 'post_views', true);
                                echo '点击量: ' . ($views ? $views : '0');
                                ?>
                            </span>
                        </div>

                        <div class="blog-post-category" style="margin-top: 10px; text-align: left;">
                            <?php
                            $categories = get_the_category($post->ID);
                            foreach ($categories as $category) {
                                echo '<span class="category-tag" style="background-color: ' . get_random_color() . ';">' . $category->name . '</span> ';
                            }
                            ?>
                        </div>

                        <div class="blog-post-excerpt">
                            <?php echo wp_trim_words(get_the_excerpt(), 50, '...'); // 只显示50个单词并添加省略号 ?>
                        </div>
                    </div>
                </div>
            </div>
            <?php $i++; endforeach;
        wp_reset_postdata(); ?>
    </div>
</div>

<style>
    .blog-container {
        font-family: "Arial", sans-serif;
        line-height: 1.5;
        color: #333;
        background-color: #f0f4ff;
        min-width: 90vw;
        padding: 30px 0;
        margin: 10px 100px;
    }

    .blog-container .row {
        padding: 0 20px;
    }

    .blog-post {
        background: #ffffff;
        border-radius: 12px;
        overflow: hidden;
        display: flex;
        margin-bottom: 30px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .blog-post:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }

    .blog-post-image {
        flex: 0 0 40%;
        height: 200px;
        /* 设置固定高度 */
        position: relative;
        /* 使其内部的img相对定位 */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .blog-post-image img {
        max-width: 100%;
        max-height: 100%;
        height: auto;
        object-fit: cover;
        /* 确保图片按比例填充容器并裁剪 */
        border-radius: 8px;
        padding: 10px 10px;
        /* 增加内边距 */
    }

    .blog-post-content {
        flex: 1;
        padding-left: 20px;
    }

    .post-header {
        display: flex;
        justify-content: space-between;
        /* 标题和置顶、热标志分开 */
        margin-bottom: 10px;
        /* 增加下边距 */
    }

    .blog-post-title {
        font-size: 1.2em;
        color: #0056b3;
        margin: 10px;
        /* 修改，去掉上外边距 */
    }

    .sticky-hot-icons {
        display: flex;
        align-items: center;
    }

    .blog-post-meta {
        display: flex;
        justify-content: space-between;
        /* 从左开始对齐 */
        align-items: center;
        margin-top: 5px;
        /* 上方间隔 */
        font-size: 0.7em;
        color: #555;
        margin-bottom: 10px;
        /* 增加下边距 */
        width: 100%;
        /* 确保宽度100% */
        text-align: left;
        /* 左对齐 */
    }

    .blog-post-author,
    .blog-post-date,
    .blog-post-comments,
    .post-views {
        flex: 0 0 25%;
        /* 每个部分宽度 */
    }

    .post-views {
        flex: 0 0 20%;
    }

    .sticky-icon,
    .hot-icon {
        padding: 5px 10px;
        border-radius: 5px;
        color: #fff;
        font-size: 0.6em;
        margin-right: 10px;
        /* 增加右侧间隔 */
    }

    .sticky-icon {
        background-color: #ffd700;
    }

    .hot-icon {
        background-color: #ff4500;
    }

    .category-tag {
        display: inline-block;
        margin-right: 5px;
        /* 修改，右侧间隔 */
        padding: 5px 10px;
        border-radius: 5px;
        color: #fff;
        font-size: 0.6em;
    }

    .blog-post-excerpt {
        white-space: normal;
        /* 允许文本自动换行 */
        overflow: hidden;
        /* 隐藏超出容器的内容 */
        text-overflow: ellipsis;
        /* 添加省略号的效果 */
        margin-top: 10px;
        font-size: 0.6em;
        color: #555;
        line-height: 1.5;
        text-align: left;
    }
</style>